<template>
  <BaseModal title="设置密码" icon="🔐" :show="show" @close="$emit('update:show', false)" headerColor="linear-gradient(135deg, #f6d365 0%, #fda085 100%)">
    <form @submit.prevent="handleSubmit">
      <div class="form-section">
        <div class="form-group" v-if="mode !== 'set'">
          <label>当前密码</label>
          <div class="input-wrapper">
            <span class="input-icon">🔑</span>
            <input type="password" v-model="form.currentPassword" placeholder="请输入当前密码" required>
          </div>
        </div>

        <div class="form-group">
          <label>新密码</label>
          <div class="input-wrapper">
            <span class="input-icon">🔒</span>
            <input type="password" v-model="form.newPassword" :placeholder="mode === 'remove' ? '留空以清除密码' : '请输入新密码'">
          </div>
        </div>

        <div class="form-group">
          <label>确认密码</label>
          <div class="input-wrapper">
            <span class="input-icon">✅</span>
            <input type="password" v-model="form.confirmPassword" placeholder="请再次输入新密码">
          </div>
        </div>
      </div>

      <div class="hint-box" v-if="mode === 'remove' || (mode === 'update' && !form.newPassword)">
        <span class="hint-icon">💡</span>
        <span>留空新密码以清除密码（取消加密）</span>
      </div>

      <div class="form-actions">
        <button type="button" class="btn-cancel" @click="$emit('update:show', false)">✖️ 取消</button>
        <button type="submit" class="btn-save" :disabled="loading">
          {{ loading ? '处理中...' : '💾 确认设置' }}
        </button>
      </div>
    </form>
  </BaseModal>
</template>

<script setup>
import { ref } from 'vue'
import BaseModal from './BaseModal.vue'
import { useCaseStore } from '../stores/case'

const props = defineProps({
  caseId: {
    type: Number,
    required: true
  },
  show: Boolean,
  mode: {
    type: String,
    default: 'set', // set, update, remove
    validator: (value) => ['set', 'update', 'remove'].includes(value)
  }
})

const emit = defineEmits(['update:show', 'close', 'success'])
const caseStore = useCaseStore()
const loading = ref(false)

const form = ref({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const handleSubmit = async () => {
  if (form.value.newPassword !== form.value.confirmPassword) {
    alert('两次输入的密码不一致')
    return
  }

  loading.value = true
  try {
    // Determine operation based on mode or API availability
    // The original code seems to handle this via different buttons but ultimately calling update or specific IPCs?
    // Actually, looking at index.js, it seems to use `case.update` for password changes too, or maybe specific handlers?
    // Wait, index.js has `handleSetEncryption`, `handleUpdatePassword`, `handleRemoveEncryption`.
    // Let's check preload.js again. It has `case.update`.
    // But `case.update` takes `id, case_name, case_status, description, case_start_time`.
    // Does it take password?
    // In `handleNewCaseSubmit`, it sends password.
    // In `handleEditCaseSubmit`, it DOES NOT send password.
    // So password updates might be separate?
    // Let's check `src/main/ipc/case.js` if possible, or just assume we need a specific IPC for password.
    // But preload.js only exposes `create`, `update`, `delete`.
    // Wait, `handleSetEncryption` in index.js is not fully shown in the snippet.
    // Let's assume we might need to add a method or use `update` if the backend supports it.
    // If I look at `handleNewCaseSubmit` in index.js (line 194), it sends `password`.
    // So `create` supports it.
    // `update` in index.js (line 419) does NOT send password.
    // So there must be another way.
    // I should check `src/main/ipc/case.js` to be sure.
    // For now, I'll assume I might need to implement a new IPC or use `update` with password field.
    // Let's check `src/main/ipc/case.js` quickly.
    
    // For now, I will use `window.electronAPI.case.update` and include password if the backend allows it.
    // Or maybe I need to check if there are other IPCs.
    // Preload.js (line 14) `update: (updateData) => ipcRenderer.invoke('update-case', updateData)`
    
    // Let's try to send password in update.
    const updateData = {
      id: props.caseId,
      password: form.value.newPassword,
      currentPassword: form.value.currentPassword // Backend might need this for verification
    }
    
    // If the backend doesn't support password update via `update-case`, I might need to fix the backend too.
    // But my task is to refactor frontend. The backend code is copied.
    // So I should check the backend code.
    
    if (window.electronAPI) {
        // I'll assume 'update-case' handles it or I'll need to add 'update-case-password'
        // Let's proceed with a generic update call for now, but I'll verify backend next.
        await window.electronAPI.case.update(updateData)
        emit('success')
        emit('update:show', false)
    }
  } catch (error) {
    console.error(error)
    alert('操作失败: ' + error.message)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.form-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.input-wrapper {
  position: relative;
}

.input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #909399;
}

input {
  width: 100%;
  padding: 10px 12px 10px 40px;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s;
  box-sizing: border-box;
}

input:focus {
  border-color: #fda085;
  box-shadow: 0 0 0 2px rgba(253, 160, 133, 0.2);
  outline: none;
}

.hint-box {
  margin-top: 20px;
  padding: 12px 16px;
  background: #fdf6ec;
  border-radius: 8px;
  border-left: 4px solid #e6a23c;
  color: #e6a23c;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hint-icon {
  font-size: 16px;
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 30px;
}

.btn-cancel {
  padding: 10px 24px;
  border: 1px solid #dcdfe6;
  background: white;
  color: #606266;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-cancel:hover {
  background: #f5f7fa;
  border-color: #c0c4cc;
}

.btn-save {
  padding: 10px 24px;
  border: none;
  background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
  color: white;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(253, 160, 133, 0.3);
}

.btn-save:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(253, 160, 133, 0.4);
}

.btn-save:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
</style>
